<template>
  <div class="tag-selector">
    <!-- 标签显示区域 -->
    <div 
      class="tag-display-area"
      :class="{ 'is-disabled': disabled }"
      @click="!disabled && openModal()"
    >
      <div v-if="selectedTags.length > 0" class="tags-container">
        <el-tag
          v-for="tag in selectedTags"
          :key="tag.id"
          :color="tag.color"
          style="color: #ffffff; border: none; font-weight: 500; margin: 2px 4px 2px 0;"
          :closable="!disabled && (showClose !== false)"
          @close="removeTag(tag.id)"
          class="display-tag-item"
        >
          {{ tag.name }}
        </el-tag>
      </div>
      <div v-else class="placeholder">
        {{ placeholder }}
      </div>
      <Icon 
        v-if="!disabled"
        icon="ep:edit" 
        class="edit-icon" 
      />
    </div>

    <!-- 标签编辑弹窗 -->
    <EditTagModal 
      ref="editTagModalRef" 
      :current-tags="selectedTags"
      @success="handleTagsUpdated" 
    />
  </div>
</template>

<script lang="ts" setup>
import EditTagModal from './EditTagModal.vue'
import type { Tag } from '@/api/localLife/spu'

const props = defineProps<{
  modelValue?: string[]  // 直接支持字符串数组
  placeholder?: string
  disabled?: boolean
  showClose?: boolean  // 是否显示删除按钮，默认true
}>()

const emit = defineEmits<{
  'update:modelValue': [tags: string[]]
  'change': [tags: string[]]
}>()

const selectedTags = ref<Tag[]>([])
const editTagModalRef = ref()

// 监听外部传入的值
watch(() => props.modelValue, (newVal) => {
  if (newVal && Array.isArray(newVal)) {
    // 将字符串数组转换为标签对象数组用于展示
    selectedTags.value = newVal.map((tagName, index) => ({
      id: index + 1,
      name: tagName,
      color: '#409EFF',
      categoryId: 1,
      subCategoryId: 1,
      categoryName: '标签',
      subCategoryName: '标签'
    }))
  } else {
    selectedTags.value = []
  }
}, { immediate: true })

/** 打开标签选择弹窗 */
const openModal = () => {
  editTagModalRef.value.open()
}

/** 移除标签 */
const removeTag = (tagId: number) => {
  const index = selectedTags.value.findIndex(tag => tag.id === tagId)
  if (index > -1) {
    selectedTags.value.splice(index, 1)
    updateValue()
  }
}

/** 标签更新成功回调 */
const handleTagsUpdated = (newTags: Tag[]) => {
  selectedTags.value = newTags
  updateValue()
}

/** 更新值并触发事件 */
const updateValue = () => {
  // 直接返回字符串数组，避免闪烁对象数据
  const tagNames = selectedTags.value.map(tag => tag.name)
  emit('update:modelValue', tagNames)
  emit('change', tagNames)
}

defineExpose({
  openModal
})
</script>

<style lang="scss" scoped>
.tag-selector {
  .tag-display-area {
    min-height: 80px;
    padding: 8px 12px;
    border: 1px solid var(--el-border-color);
    border-radius: var(--el-border-radius-base);
    background-color: var(--el-fill-color-blank);
    cursor: pointer;
    position: relative;
    transition: border-color 0.3s;
    
    &:hover:not(.is-disabled) {
      border-color: var(--el-color-primary);
    }
    
    &.is-disabled {
      background-color: var(--el-disabled-bg-color);
      color: var(--el-disabled-text-color);
      cursor: not-allowed;
      
      .edit-icon {
        display: none;
      }
    }
    
    .tags-container {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      min-height: 24px;
      
      .display-tag-item {
        :deep(.el-tag__close) {
          color: #ffffff !important;
          
          &:hover {
            color: #ffffff !important;
            background-color: rgba(255, 255, 255, 0.2) !important;
          }
        }
      }
    }
    
    .placeholder {
      color: var(--el-text-color-placeholder);
      font-size: 14px;
      line-height: 24px;
    }
    
    .edit-icon {
      position: absolute;
      top: 8px;
      right: 8px;
      color: var(--el-text-color-placeholder);
      font-size: 16px;
    }
  }
}
</style> 
